<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 Not Found</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        neutral: '#f1f5f9',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
</head>

<body
    class="bg-gradient-to-br from-neutral to-white min-h-screen flex flex-col items-center justify-center p-4 font-sans">
    <div class="text-center max-w-md w-full">
        <!-- 错误图标 -->
        <div class="w-24 h-24 mx-auto mb-6 text-primary animate-float">
            <i class="fa fa-exclamation-triangle text-6xl"></i>
        </div>

        <!-- 错误标题 -->
        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-800 mb-4 text-shadow">404 Not Found</h1>

        <!-- 错误信息 -->
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-secondary mb-8 leading-relaxed">
            获取题目失败
        </p>

        <!-- 辅助说明 -->
        <p class="text-gray-500 mb-8">
            您请求的资源不存在
        </p>

        <!-- 返回首页按钮 -->
        <a href="/acq_all_questions"
            class="inline-flex items-center bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1">
            <i class="fa fa-arrow-left mr-2"></i>
            <span class="bg-blue-600 px-3 py-1 rounded border border-blue-700">返回题目列表</span>
        </a>

    </div>

    <!-- 页脚 -->
    <footer class="mt-16 text-gray-400 text-sm">
        <p>© CCOJ</p>
    </footer>
</body>

</html>